<template>
  <!-- 大好河山 -->
  <div class="fjrh">
    <div class="h2">风景如画</div>
    <ul class="listone">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul class="listtwo">
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
.fjrh {
  width: 100%;
  height: 816px;
  /* margin-bottom: 105px; */
  /* background-color: skyblue; */
}
.fjrh .h2 {
  font-size: 50px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  text-align: center;
  margin-bottom: 74px;
}
.fjrh .list {
  height: 676px;
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
}
.fjrh .listone, .listtwo{
  height: 338px;
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
}
.fjrh .listone li:nth-child(1) {
  width: 25%;
  height: 338px;
  background: hotpink;
}
.fjrh .listone li:nth-child(2) {
  width: 25%;
  height: 338px;
  background: green;
}
.fjrh .listone li:nth-child(3) {
  width: 25%;
  height: 338px;
  background: blue;
}
.fjrh .listone li:nth-child(4) {
  width: 25%;
  height: 338px;
  background: greenyellow;
}
.fjrh .listtwo li:nth-child(1) {
  width: 25%;
  height: 338px;
  background: pink;
}
.fjrh .listtwo li:nth-child(2) {
  width: 25%;
  height: 338px;
  background: red;
}
.fjrh .listtwo li:nth-child(3) {
  width: 25%;
  height: 338px;
  background: black;
}
.fjrh .listtwo li:nth-child(4) {
  width: 25%;
  height: 338px;
  background: aquamarine;
}
</style>